import React from 'react'
import { Row, Col, Card, Statistic } from 'antd'
import { BarChartOutlined, RiseOutlined, EyeOutlined, UserOutlined } from '@ant-design/icons'

const DataAnalysis: React.FC = () => {
  return (
    <div>
      <div className="page-title">
        <BarChartOutlined />
        数据监测与效果分析
      </div>

      <Row gutter={[16, 16]}>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="内容发布量" value={156} prefix={<BarChartOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="用户活跃度" value={89} suffix="%" prefix={<UserOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="总浏览量" value={125000} prefix={<EyeOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic title="增长率" value={15.8} suffix="%" prefix={<RiseOutlined />} />
          </Card>
        </Col>
      </Row>

      <Card title="数据分析看板" className="custom-card" style={{ marginTop: 16 }}>
        <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>
          <BarChartOutlined style={{ fontSize: 48, marginBottom: 16 }} />
          <div>数据分析图表组件开发中...</div>
        </div>
      </Card>
    </div>
  )
}

export default DataAnalysis